import { Button, message } from 'antd';
import React from 'react';

import functionaModule from '@/assets/images/functionaModules.png';
import SystemStructurePng from '@/assets/images/SystemStructure.png';
import BaseDiv from '@/components/baseDiv';

import styles from './index.less';

interface Props {
  /**
   * SystemStructure true系统结构 false功能模块
   */
  SystemStructure?: boolean;
}

export default function SystemStructure(props: Props) {
  const boxStyles: React.CSSProperties = {
    // height: '1057px',
    // marginBottom: 72,
    display: 'flex',
    justifyContent: 'space-evenly',
    alignItems: 'center',
  };
  const baseStyles: React.CSSProperties = {
    background: props.SystemStructure ? 'rgb(248, 249, 252)' : '#fff',
    opacity: 1,
  };
  return (
    <BaseDiv baseStyles={baseStyles} boxStyles={boxStyles}>
      {props.SystemStructure ? (
        <div className={styles.content}>
          <div className={styles.title}>系统结构</div>
          <img src={SystemStructurePng} alt="" />
        </div>
      ) : (
        <div className={styles.content} style={{ marginBottom: 0 }}>
          <div className={styles.title} style={{ marginTop: 60 }}>
            功能模块
          </div>
          <img src={functionaModule} alt="" />
          <div>
            <Button onClick={() => { message.info('暂无此功能'); }}>立即使用</Button>
          </div>
        </div>
      )}
    </BaseDiv>
  );
}
